<template>
  <div style="width: 100%;">
    <!-- 头部 -->
    <Header></Header>
    <!-- 内容 -->
    <div id="product">
      <!-- 顶部导航栏 -->
      <div class="header">
        <div class="header-centent">
          <div class="header-centent-left">
            {{ project.name }}&nbsp;&nbsp;|&nbsp;&nbsp;
            <router-link :to="'/Category?categoryId='+ project.categoryId">{{ project.categoryName }}</router-link>
          </div>
          <div class="header-centent-right">
            <router-link to="">概述页</router-link>
            <router-link to="">参数页</router-link>
            <router-link to="">F码通道</router-link>
            <router-link to="">咨询客服</router-link>
            <router-link to="" style="border: none;">用户评价</router-link>
          </div>
        </div>
      </div>
      <!-- 参数 -->
      <div class="body">
        <!-- 左侧轮播图 -->
        <div class="carousels">
          <Carousels>这是轮播图</Carousels>
        </div>
        <!-- 右侧详细参数 -->
        <div class="detail">
          <!-- 相关参数 -->
          <div class="name">
            <h2 style="color: black; font-weight: 400">{{ project.name }}</h2>
            <p style="color: #b7b0b7; font-size: 13px; text-align: left">{{ project.title }}</p>
            <p style="color: #ff6700; font-size: 13px">小米自营</p>
            <h3 style="color: #ff6700; font-weight: 200">
              {{ project.editions[editionNumber].colors[colorNumber].price }}元
            </h3>
          </div>
          <!-- 地址栏 -->
          <div class="location">
            <p>
              <i class="el-icon-location-outline"></i>
              xxxxxxxx&nbsp;&nbsp;&nbsp;
              <a href="">修改</a>
            </p>
          </div>
          <!-- 版本选择 -->
          <!-- 注意！！！！改变选中的版本与颜色时，是根据id改变的，但页面上展示数据时是根据元素所在数组的下标，所以当id改变时，下标必须改变，注意二者统一 -->
          <!-- 1.先根据editionId遍历版本，展示在页面上 
             2.默认选中第一个
             3.根据editionId，确定选中的选项在edition数组中的位置下标
             4.遍历选中的edition对象的color数组
             5.默认选中第一个
             6.根据colorId，确定选中的选项在color数组中的下标，确定color值和price值
            -->
          <div class="version">
            <div>
              <h3>选择版本</h3>
              <!-- v-model 绑定值，只有绑定值相同的radio才能互斥，组合成一个单选框group -->
              <!-- label radio的value值，可以设为版本id -->
              <el-radio-group v-model="radio1">
                <!-- 绑定点击事件: 
                1.点击时找到该版本在edition数组中的下标 注意：只有等到点击事件完全结束时，v-model绑定的数据才会更新为label值
                2.在颜色遍历出来之后默认选择第一个-->
                <el-radio
                  :label="item.id"
                  border
                  v-for="item in project.editions"
                  :key="item.id"
                  @click.native="editionIndex($event, item.id)"
                >
                  {{ item.name }}
                </el-radio>
              </el-radio-group>
            </div>

            <div>
              <h3>选择颜色</h3>
              <el-radio-group v-model="radio2">
                <!-- 绑定点击事件：
                1.点击时找到该颜色在color数组中的下标 -->
                <el-radio
                  :label="item.id"
                  border
                  v-for="item in project.editions[editionNumber].colors"
                  :key="item.id"
                  @click.native="colorIndex($event, item.id)"
                >
                  {{ item.color }}
                </el-radio>
              </el-radio-group>
            </div>
          </div>
          <!-- 总计 -->
          <div class="aggregate">
            <span>
              {{ project.name }}&nbsp;&nbsp;
              {{ project.editions[editionNumber].name }}&nbsp;&nbsp;
              {{ project.editions[editionNumber].colors[colorNumber].color }}
            </span>
            <span class="span2">
              {{ project.editions[editionNumber].colors[colorNumber].price }}元
            </span>
            <h1>
              总计:{{ project.editions[editionNumber].colors[colorNumber].price }}元
            </h1>
          </div>
          <!-- 加入购物车 -->
          <el-button type="primary">加入购物车</el-button>
        </div>
      </div>
      <!-- 价格说明 -->
      <div class="footer">
        <div class="footer-content">
          <h2 style="">价格说明</h2>
          <img src="../assets/价格说明.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 脚部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import { getByProductId } from "@/api/shop"

export default {
  mounted() {
    //默认选中的版本和颜色
    this.radio1 = this.project.editions[this.editionNumber].id;
    this.radio2 = this.project.editions[this.editionNumber].colors[this.colorNumber].id;
  },
  data() {
    return {
      //模拟商品源数据
      project: {
        id: 0,
        name: '',
        categoryId: 0,
        categoryName: '',
        title: '',
        img: '',
        editions: [
            {
                id: 0,
                name: '',
                img: '',
                productId: 0,
                productName: '',
                colors: [
                    {
                        id: 0,
                        editionId: 0,
                        editionName: '',
                        color: '',
                        price: 0,
                    }
                ]
            }
        ]
      },

      //选中的版本id 一打开页面就选中第一个版本的第一个颜色
      radio1: "",
      //选中的颜色id
      radio2: "",
      //选中的版本的下标，默认0，根据该数据展示颜色
      editionNumber: 0,
      //选中的颜色的下标
      colorNumber: 0,
    };
  },
  created() {
    //从路由中取到商品id，去数据库查
    getByProductId(this.$route.query.productId).then((res) => {
        this.project = res.data;
        console.log(this.project);
    }).catch((err) => {
        console.log(err);
    })
  },
  methods: {
    //根据对象属性获取对象在数组中的下标
    getArrayIndex: (arr, id) => {
      var i = arr.length;
      while (i--) {
        if (arr[i].id === id) {
          return i;
        }
      }
    },
    //选择版本
    editionIndex: function (el, id) {
      //当input标签触发的点击事件时，阻止该事件
      if (el.target.tagName === "INPUT") return;

      //1.计算出选中的版本的下标值，赋值给editionNumber
      this.editionNumber = this.getArrayIndex(this.project.editions, id);
      console.log(this.editionNumber);
      //2.把选中的颜色改为选中的版本的第一个颜色
      this.radio2 = this.project.editions[this.editionNumber].colors[0].id;
      console.log(this.radio2);
      //3.把展示的颜色的下标值同步为选中的颜色的下标值
      this.colorNumber = this.getArrayIndex(
        this.project.editions[this.editionNumber].colors,
        this.radio2
      );
    },

    //选择颜色
    colorIndex: function (el, id) {
      if (el.target.tagName === "INPUT") return;

      //1.计算出选中的颜色的下标值，赋值给colorNumber
      this.colorNumber = this.getArrayIndex(
        this.project.editions[this.editionNumber].colors,
        id
      );
      console.log(this.colorNumber);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
#product {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 头部（锁定浏览器顶部） */
.header {
  width: 100%;
  height: 60px;
  margin-bottom: 40px;
  background-color: white;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 6px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

  display: flex;
  justify-content: center;
  align-items: center;
}
.header-centent {
  width: 1200px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-centent-left {
  color: #424242;
  font-size: 18.5px;
}
.header-centent-left a {
  color: #616175;
  font-size: 13px;
  text-decoration: none;
}
.header-centent-right a {
  padding: 0 12px 0 6px;
  color: #616161;
  font-size: smaller;
  text-decoration: none;
  border-right: 1px solid #e0e6ee;
}
/* 主体内容 */
.body {
  width: 1200px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/* 左侧轮播图 */
.carousels {
  width: 570px;
}
/* 右侧明细 */
.detail {
  width: 570px;

  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 详细参数 */
.name {
  width: 100%;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.name h2,
p,
h3 {
  margin-bottom: 20px;
}
/* 地址选择 */
.location {
  width: 100%;
  height: 120px;
  margin: 20px 0px;
  border: 1px solid #e0e0e0;
  background-color: #fafafa;
  border-radius: 1ch;

  display: flex;
  align-items: center;
}
.location > p {
  margin-left: 15px;
}
/* 版本选择 */
.version {
  width: 100%;
}
.version > div {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.version > div h3 {
  margin-bottom: 15px;
  font-weight: 400;
}
.el-radio-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.el-radio.is-bordered {
    margin-right: 0px;
    margin-bottom: 10px;
    width: 275px;
}
.el-radio.is-bordered+.el-radio.is-bordered {
    margin-left: 0px;
    margin-right: 0px;
}
::v-deep(.el-radio__input) {
    display: none !important;
}
/* 被选中的选项 */
.el-radio.is-bordered.is-checked {
    border-color: #FF6710;
}
::v-deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #FF6710 !important;
}

/* 总计 */
.aggregate {
  width: 100%;
  height: 120px;
  background-color: #f9f9fa;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
}
.aggregate :first-child,
h1 {
  padding: 10px 20px;
  width: 65%;

  display: flex;
}
.aggregate .span2 {
  padding: 10px 20px;
  width: 20%;
}
.aggregate > span {
  font-size: 14px;
}
.aggregate > h1 {
  color: #ff6710;
  font-size: 27px;
  font-weight: 400;
}
/* 加入购物车 */
.el-button {
  width: 50%;
  height: 60px;
  margin: 20px 0;
  font-size: 18px;
  background-color: #FF6700;
  border-color: #FF6700;

  align-self: flex-start;
}
/* 鼠标激活 */
.el-button--primary.is-active,
.el-button--primary:active {
    background: #F25807;
    border-color: #F25807;
    color: #fff;
}
/* 鼠标悬浮 */
.el-button--primary:focus,
.el-button--primary:hover {
    background: #F25807;
    border-color: #F25807;
    color: #fff;
}

/* 底部 */
.footer {
  width: 100%;
  height: 317px;
  background-color: #f5f5f5;

  display: flex;
  justify-content: center;
}
.footer-content {
  width: 70%;

  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer-content>h2 {
  align-self: flex-start;
  margin-bottom: 20px;
  font-weight: 400;
}
</style>